In this lesson, we'll take a closer look at managing new browser windows with the browser window proxy
class, I say class as the browser window proxy instance is provided by electron, much like the main
app instance and not a module we require ourselves.
Now, there's two ways to have electron create a new browser window automatically, the first being
to click on our link with a target attribute of underscore blank and the second, which is what we'll
be using is to call the browser Windows native window open function.
It's this function then on which electron will return a browser window proxy object.
Let me demonstrate again, working in index DOT, XHTML or the renderer process.
I'll get rid of all this.
Adding an H3 element with a link to developer Dot Mozilla dot org or any other loadable.
You are all called that new window.
And most importantly, to have this link opened in a new browser window instance at Target equals underscore
blank.
I'll also make the page links white, the default dark blue being a bit difficult to see at the moment,
they're safe over to the app, which I already have running.
Refresh the main window which reloads indexed on HTML.
I'll go ahead and click that new window link.
And as expected, Electron automatically creates a new browser window instance with the content from
that link loaded as its web contents.
But whilst having this new window created for us is very convenient, we don't have a reference to it
in our code and therefore can't control it in any way.
Apart from a few standard UI elements, the operating system provides this being where we can now instead
make use of windows open to obtain a reference to this window.
So let's see that I'll cut this link, change the aircraft to a hash instead.
This not being a requirement, but it will just ensure the links, the looks and behaves like it should,
adding an unclick attribute, this being the same as listening for a click on the element in which our
core new win or new window at this function.
I'm just going to keep this in line for now.
So remove renderer dot js.
Consed new win equals a function.
In which our call window dot open with that Mozilla, you are all this now being the exact same thing
as simply using the link with the target blank attribute.
But the reason we're doing this is to have a reference to this new window, create a global variable
to hold that reference, let when assigning to win the return value of window dot open being the browser
window proxy object save.
Close this, reload the window, click the link, which works exactly as before, but now we have a
reference to this window on the global wind variable of the main window.
Check that in the windows.
Dev tools console when the name of that variable, which logs out an instant of browser window proxy
with some familiar browser window methods such as close focus, blur, etc. browser window proxy, essentially
being a limited version of a standard browser window instance.
So with that reference available to us, let's see a couple of examples of how we might use this.
I'll add a new link calling closed when?
Label that close window, create that function consed close win equals a function in which we can use
this global window reference to close the second window after opening it window close exactly the same
as working with the browser window module.
Keep in mind that this will only work after we've actually created new window and have a reference to
the new window save.
Get rid of this second window, reload the content, which adds the new link, open the windows before
and now with that global reference available click closed window, which closes the new window from
main window where it was created.
Again, this being exactly the same as using the complete browser window module, for example, in the
docs.
We also have focus blur and for executing JavaScript on a browser window proxy object evil.
Let's see that I'll add another link calling style win.
Label this bad, Font's.
Create this style win function for that link in which we can now execute some JavaScript code from the
main Windows Web content in the new window when eval, I'll give the Web contents of this window some
bad font as per the label running document doget elements by tag name.
So selecting all matching HTML tags on the document H1.
We are only interested in the first of these so select elements zero of the array setting on this heading
element style property font family equal to comic sans MS save reload main windows contents open the
new window.
And now regardless of this being remote content, we have a reference to this window, meaning we can
control all of its content.
Click that new link and there we see that main H1 heading change to Comic Sans.
So having a reference to a browser window created with window dot open is great.
But let's say we want to actually change how that window is created.
We can do this as well.
Over to the electron documentation for window dot open.
We see this takes as the first argument that you are able to load into the new window as we have it
in our code.
And then two optional parameters being the name of the window.
Not much use as the HTML title element will overwrite it and features these being browser window features
or options in string form.
If we check the standard browser window docs, not browser window proxy a bit down the page, we get
to construct our options for a new browser window feature being this.
Lets see an example.
First, I'll set the window title as that's now required when using the third argument also underscore
blank as this isn't used and then in string form some features.
For example, let's say the new windows width equal to 500 comma to separate between options height
equal to 450 comma and set always on top equal to one.
This being the equivalent of true.
The true keyword won't work in this format.
Save.
Reload the content.
New window, and they're this time the new window is created to our specified dimensions whilst being
said to always stay on top of other windows, bring main window into focus, and as expected, it stays
behind the new window despite being the actively focused window.
So, as you can see, using the native window open method, along with electron's implementation of
a proxy browser window, we can manage dynamic instances of browser windows directly from the render
reprocesses responsible for creating them.
We'll see a more practical use case of this later in the course.